@charset "utf-8";
@import "init";
@import "common";



main{
	position: absolute;
	left: 0;
	top: r(89);
	bottom: r(107);
	width: 100%;
	overflow-y: auto;
	.banner{
		width: 100%;
		height: r(358);
		overflow: hidden;
		position: relative;
		.img_banner{
			width: 100%;
			height: r(358);
			overflow: hidden;
			img{
				width: 100%;
			}
		}
		.mask{
			width: 100%;
			height:r(104);
			background-color: rgba(0,0,0,.3);
			position: absolute;
			bottom:0;
			left:0;
			padding: r(24) r(21) r(14) r(30);
			box-sizing:border-box;
			p{
				font-size: r(26.79);
				color: white;
				background-color:$bg_color;
				display: inline-block;
			}
			span{
				font-size: r(26.79);
				color:white;
			}
			
		}
	}

	.content_box{
		width: 100%;
		padding: r(20) r(29) r(0);
		box-sizing: border-box;
		position: relative;
		// background-color: #f5f5f5;
		.article{
			display: flex;
			margin-bottom: r(21);
			width:r(583);
			.article_left{
				width:r(282);
				height:r(343);
				background-color:#f6f6f6;
				margin-right: r(18);
				.img_box{
					width:r(282);
					height: r(182);
					img{
						width: 100%;
					}
				}
				h3{
					font-size: r(21);
					color: #010101;
					font-weight: 300;
					margin: r(14) r(0) r(4);
				}
				button{
					width: r(88);
					height: r(27);
					background-color:$bg_color;
					font-size: r(18);
					color: white;
					border: none;
					border-radius:r(5);
				}
				i{
					font-size: r(25);
					color:$sub_color;
				}
				span{
					font-size: r(20);
					color:$sub_color;
				}
				.portrait{
					vertical-align: middle;
					display: inline-block;
					width: r(35);
					height: r(35);
					overflow: hidden;
					img{
						width: 100%;
					}
				}
				p{
					vertical-align: middle;
					display: inline-block;
					font-size: r(18);
					color:$sub_color;
				}
			}
			.article_right{
				width:r(282);
				height:r(343);
				background-color:#f6f6f6;
				.img_box{
					width:r(282);
					height: r(182);
					img{
						width: 100%;
					}
				}
				h3{
					font-size: r(21);
					color: #010101;
					font-weight: 300;
					margin: r(14) r(0) r(4);
				}
				button{
					width: r(88);
					height: r(27);
					background-color:$bg_color;
					font-size: r(18);
					color: white;
					border: none;
					border-radius:r(5);
				}
				i{
					font-size: r(25);
					color:$sub_color;
				}
				span{
					font-size: r(20);
					color:$sub_color;
				}
				.portrait{
					vertical-align: middle;
					display: inline-block;
					width: r(35);
					height: r(35);
					overflow: hidden;
					img{
						width: 100%;
					}
				}
				p{
					vertical-align: middle;
					display: inline-block;
					font-size: r(18);
					color:$sub_color;
				}
			}
		}
		.article:nth-child(3)::after{
			content: "";
			display: block;
			width:r(583);
			border-bottom: 1px solid $sub_color;
			position: absolute;
			bottom:-12px;
			left: 17px;
		}
	}
	

	.main_bottom{
		width: 100%;
		height: r(60);
		background-color: white;
		text-align: center;
		
		p{
			color: $sub_color;
			font-size: r(22);
			line-height: r(44);
		}
	}
	
}